//
// Buttons
// --------------------------------------------------


@button-line-height: 1.42857143;
@button-flat-hover-bg: #e2e2e2;


// Mixins

.button-size(@height; @padding-horizontal; @font-size) {
    height: @height;
    padding: (@height - 2 - @font-size * @button-line-height) / 2 @padding-horizontal;
    font-size: @font-size;
}

.button-flat(@color) {
    &, 
    &:hover {
        color: @color;
    }
}

.button-float(@background; @border-color; @text-color) {
    background-color: @background;
    border-color: @border-color;
    color: @text-color;

    > .badge {
        background-color: @text-color;
        color: @background;
    }

    &:focus, 
    &:hover, 
    &:active {
        background-color: lighten(@background, 8%);
        border-color: lighten(@border-color, 8%);
        color: @text-color;
    }
}

.button-outline(@color) {
    background-color: #fff;
    border-color: @color;
    color: @color;

    > .badge {
        background-color: @color;
        color: #fff;
    }

    &:focus, 
    &:hover, 
    &:active, 
    &.active {
        background-color: @color;
        border-color: @color;
        color: #fff;

        > .badge {
            background-color: #fff;
            color: @color;
        }
    }
}



.btn-float, .btn-flat, .btn-outline {
    display: inline-block;
    .button-size(36px; 22px; @font-size-base);
    line-height: @button-line-height;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 2px;
    letter-spacing: .5px;
    transition-duration: .3s;
    .user-select(none);

    &, 
    &:focus, 
    &:hover, 
    &:active {
        outline: 0;
        text-decoration: none;
    }

    // icon
    > i, 
    > .badge {
        margin: 0 6px;
    }

    // badge
    > .badge {
        display: inline-block;
        padding: 3px 7px;
        text-align: center;
        font-size: @font-size-small;
        font-weight: 700;
        line-height: 1;
        border-radius: 10px;
    }
}

.btn-float {
    box-shadow: @box-shadow-base;
}

.btn-flat {
    background-color: transparent;

    &:focus, 
    &:hover, 
    &:active {
        border-color: @button-flat-hover-bg;
        background-color: @button-flat-hover-bg;
    }
}

.btn-no-bg {
    background-color: transparent;
    border-color: #fff;
    color: #fff;

    &:focus, 
    &:hover, 
    &:active {
        background-color: #fff;
        border-color: #fff;
        color: @text-color-base;
    }
}

.btn-small {
    .button-size(28px; 18px; @font-size-small);
}

.btn-large {
    .button-size(44px; 26px; @font-size-base);
}

.btn-larger {
    .button-size(52px; 30px; @font-size-big);
}

.btn-float.btn-default {
    background-color: @default-color;
    border-color: #ccc;
    color: @text-color-base;

    &:focus, 
    &:hover, 
    &:active {
        background-color: lighten(@default-color, 4%);
    }
}

.btn-float.btn-primary {
    .button-float(@primary-color; @primary-color; #fff);
}

.btn-float.btn-success {
    .button-float(@color-success; @color-success; #fff);
}

.btn-float.btn-info {
    .button-float(@color-info; @color-info; #fff);
}

.btn-float.btn-warning {
    .button-float(@color-warning; @color-warning; #fff);
}

.btn-float.btn-danger {
    .button-float(@color-danger; @color-danger; #fff);
}

.btn-flat.btn-default {
    .button-flat(@text-color-base);
}

.btn-flat.btn-primary {
    .button-flat(@primary-color);
}

.btn-flat.btn-success {
    .button-flat(@color-success);
}

.btn-flat.btn-info {
    .button-flat(@color-info);
}

.btn-flat.btn-warning {
    .button-flat(@color-warning);
}

.btn-flat.btn-danger {
    .button-flat(@color-danger);
}

.btn-outline.btn-primary {
    .button-outline(@primary-color);
}

.btn-outline.btn-success {
    .button-outline(@color-success);
}

.btn-outline.btn-info {
    .button-outline(@color-info);
}

.btn-outline.btn-warning {
    .button-outline(@color-warning);
}

.btn-outline.btn-danger {
    .button-outline(@color-danger);
}

// disabled buttons
button[disabled],
.btn-disabled {
    cursor: @cursor-disabled !important;
    color: @text-color-lighter !important;
}

button[disabled].btn-float,
.btn-float.btn-disabled {
    background-color: @default-color !important;
    border-color: #ccc !important;
}

button[disabled].btn-flat:hover,
.btn-flat.btn-disabled:hover {
    background-color: transparent;
    border-color: transparent !important;
}

button[disabled].btn-outline,
.btn-outline.btn-disabled {
    border-color: #ccc !important;
}

// block button
.btn-block {
    display: block;
}